<template>
	<ul class="table">
		<!-- <span>表头文字说明</span> -->
		<li class="top flex">
			<span class="tr0 tr ilbk" v-text="Lang[lang][0]">用户</span>
			<span class="tr1 tr ilbk" v-text="Lang[lang][1]">数量</span>
			<span class="tr2 tr ilbk" v-text="Lang[lang][2]">时间</span>
			<!-- <span class="tr3 tr ilbk" v-text="Lang[lang][3]">操作</span> -->
		</li>
		<li v-for="(v, i) in list" :key="i" class="li flex animation zccontainer">
			<div class="zclist">
				<span class="tr0 tr ilbk" v-text="v.fuid" />
				<span class="tr1 tr ilbk" v-text="v.count" />
				<span class="tr2 tr ilbk" v-text="Utils.formatTime(v.createTime.time)" />
			</div>
		</li>
			<div class="page" v-if="list.length != 0">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page.sync="currentPage1"
					:page-size="20"
					layout="total, prev, pager, next"
					:total="total">
				</el-pagination>
			</div>
	</ul>

</template>

<script>
	import {rengou} from './lang'
	import {vpost, vlink} from '@api'
	import {Utils} from './tools'
	export default {
		name: 'itable',
		props: {
			rengouInfo: {default: []},
		},
		data() {
			return {
				currentPage1: 1,
				total:'',
				Lang: rengou,
				list: [],
				Utils,
			}
		},
		computed: {
			lang() {
				return this.$store.state.setting.lang
			}
		},
		watch:{
			rengouInfo(v){
				this.currentPage1 = 1
				v == 0 ? this.getJT():this.getDT()
			}
		},
		created() {},
		methods: {
			/**
			 * @Description: ${静态收益}
			 * @Param
			 * @Return
			 * @Author 焦政
			 * @Date 2018/12/12
			 * @Version 1.0
			 */
			getJT(){
				let params = {
					currentPage:this.currentPage1,
				}
				vpost(vlink.subscriptionCenter.jintai,params).then(re=>{
					console.log('静态收益',re)
					this.list = re.map.list
					this.total = re.map.total
				})
			},
			/**
			 * @Description: ${动态收益}
			 * @Param
			 * @Return
			 * @Author 焦政
			 * @Date 2018/12/12
			 * @Version 1.0
			 */
			getDT(){
				let params = {
					currentPage:this.currentPage1,
				}
				vpost(vlink.subscriptionCenter.dongtai,params).then(re=>{
					console.log('动态收益',re)
					this.list = re.map.list
					this.total = re.map.total
				})
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.currentPage1 = val
				console.log(val,this.currentPage1)
				this.rengouInfo == 0 ? this.getJT() : this.getDT()
			}
		},
		mounted() {
			this.getJT()
		},
	}
</script>

<style scoped>
	.table {
		margin: 0 20px;
		min-height: 500px;
		background-color: #171926;
	}
	.top {
		color: rgb(97, 104, 138);
	}
	.li {
		border-top: 1px solid #1d253a;
	}
	.li:hover {
		background-color: #1c1f2e;
	}
	.tr {
		width: 150px;
		line-height: 48px;
		font-size: 14px;
	}
	.tr0 {
		padding-left: 10px;
		width: 220px;
		text-align: left;
	}
	.tr3 {
		text-align: right;
		margin-left: auto;
		padding-right: 10px;
	}

	.zccontainer {
		display: flex;
		flex-direction: column;
		position: relative;
	}
	.zclist {
		width: 100%;
	}
	.aa {
		width: 100%;
		background-color: #171926;
		padding-left: 10px;
		border: 1px solid #262a42;
	}
	.cc {
		margin-left: auto;
		position: absolute;
		right: 0;
	}
	.tbaddress {
		width: 100%;
	}
	.addreddTitle {
		display: inline-block;
		margin-top: 10px;
		margin-bottom: 10px;
		font-size: 18px;
		color: rgb(97, 104, 138);
	}
	.addressArea {
		width: 100;
		height: 40px;
	}
	.addressCopy {
		color: #7a98f7;
		margin-left: 10px;
	}

	/*输入部分*/
	.tbaa {
		padding-left: 10px;
		display: flex;
		flex-direction: column;
	}
	.formArea {
		width: 100%;
		height: 60px;
		display: flex;
		flex-direction: column;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.addressSel {
		height: 50px;
		background-color: #1d253a;
		color: #fff;
		margin-top: 4px;
	}
	.inputCon {
		width: 100%;
		height: 50px;
		margin-top: 4px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border: 1px solid #ccc;
		background-color: #1d253a;
	}
	.forminput {
		height: 32px;
		width: 90%;
		background-color: #1d253a;
		border: none;
		font-size: 16px;
		color: #fff;
	}
	.inputText {
		display: inline-block;
		width: 40px;
		margin-right: 30px;
	}
	.tbbtn {
		width: 90%;
		height: 40px;
		background-color: #7a98f7;
		color: #fff;
		font-size: 16px;
		border-radius: 6px;
		margin: 10px auto;
	}
	.page{
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 20px 0;
	}
</style>
